const { defineConfig } = require("@vue/cli-service");
const path = require("path");
// 判断是否是生产环境
const is_prod = process.env.NODE_ENV === "production";
// 配置引入cdn的js、css资源地址
const cdn = {
  css: ["https://unpkg.com/vant@2.12.48/lib/index.css"],
  js: [
    "https://cdn.jsdelivr.net/npm/vue@2.7.8",
    "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js",
    "https://unpkg.com/vue-router@3.5.4/dist/vue-router.min.js",
    "https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
    "https://unpkg.com/vant@2.12/lib/vant.min.js",
  ],
};
// 配置打包时使用cdn节点，忽略打包的第三方库。
// externals配置项的键是以前在package.json中通过npm安装生成的第三方库名称：
/**
 *"vue": "^2.6.14",
  "vue-router": "^3.5.1",
  "vuex": "^3.6.2"
 */
// externals配置项的值是引入cdn链接之后，在项目中生成的全局变量名称，这些全局变量名称是固定的，不能乱改，注意大小写。
// vue官方文档中的语句：直接下载并用 <script> 标签引入cdn资源，Vue 会被注册为一个全局变量。
const externals = {
  vue: "Vue", // 属性名vue/vue-router/vuex表示在组件中遇到import xxx from "vue/vue-router/vuex"等语句时，不用去node_modules中找包了，因为没有安装，而是从全局变量中查找Vue/VueRouter/Vuex这些内容。
  "vue-router": "VueRouter",
  vuex: "Vuex",
  axios: "axios",
  vant: "vant",
};

module.exports = defineConfig({
  transpileDependencies: false,
  publicPath: "./",
  productionSourceMap: false,
  devServer: {
    proxy: {
      "/lqb": {
        target: "https://m.lanqb.com",
        changeOrigin: true,
        pathRewrite: {
          "^/lqb": "",
        },
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@/assets": path.resolve(__dirname, "src/assets"),
        "@/utils": path.resolve(__dirname, "src/utils"),
      },
    },
    externals: externals, // 将这些externals内部的包视为第三方库，不需要通过webpack进行打包。等价于chainWebpack中的配置。
  },
  chainWebpack(config) {
    // 所有环境统一配置cdn
    config.plugin("html").tap((args) => {
      args[0].cdn = cdn;
      return args;
    });
    if (is_prod) {
      // config.plugin("html").tap 可以对 html-webpack-plugin 插件进行配置，内部args增加的属性，可以通过 htmlWebpackPlugin.options 这个对象获取：htmlWebpackPlugin.options.cdn/htmlWebpackPlugin.options.title
      config.plugin("html").tap((args) => {
        args[0].title = "生产环境";
        return args;
      });
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: {
            // 压缩 JPEG 图像
            progressive: true,
          },
          optipng: {
            // 压缩 PNG 图像
            enabled: false,
          },
          pngquant: {
            // 压缩 PNG 图像
            quality: [0.65, 0.9],
            speed: 4,
          },
          gifsicle: {
            // 压缩 GIF 图像
            interlaced: false,
          },
          webp: {
            // 将 JPG 和 PNG 图像压缩为 WEBP
            quality: 75,
          },
        })
        .end();
    } else {
      config.plugin("html").tap((args) => {
        args[0].title = "测试环境"; // 项目配置统一的title
        return args;
      });
    }
    config.externals(externals); // 将这些externals内部的包视为第三方库，不需要通过webpack进行打包。如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。
  },
});
